<template>
	<div class="wrapper">
		<header>订单信息</header>

		<!-- 地址信息 -->
		<div class="order-info">
			<h5>订单配送至:</h5>
			<div class="order-info-address" @click="toUserAddress">
				<p>{{deliveryaddress!=null?deliveryaddress.address:'请选择送货地址'}}</p>
				<i class="fa fa-angle-right" ></i>
			</div>
			<p>{{user.userName}}-{{user.userSex | sexFilter}}-{{user.userId}}</p>
		</div>

		<!-- 商家标题 -->
		<h3>{{business.businessName}}</h3>
		<!-- 点餐列表 -->
		<ul class="order-detailed">
			<li v-for="item in cartArr">
				<div class="order-detailed-left">
					<img :src="item.food.foodImg">
					<p>{{item.food.foodName}} × {{item.quantity}}</p>
				</div>
				<p>&#165;{{item.food.foodPrice*item.quantity}}</p>
			</li>
			
		</ul>

		<!-- 配送费 -->
		<div class="order-deliveryfee">
			<p>配送费</p>
			<p>&#165;{{business.deliveryPrice}}</p>
		</div>

		<!-- 合计部分 -->
		<div class="total">
			<div class="total-left">
				&#165;{{totalPrice}}
			</div>
			<div class="total-right" @click="toPayment()">
				去支付
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		name:'Orders',
		data(){
			return{
				businessId:this.$route.query.businessId,
				business:{},
				user:{},
				cartArr:[],
				deliveryaddress:{}
			}
		},
		created() {
			
			this.user = this.$getSessionStorage('user');
			this.deliveryaddress = this.$getLocalStorage(this.user.userId);
			
			//根据商家id查询商家信息
			this.$axios.post('BusinessController/getBusinessById',
			this.$qs.stringify({businessId:this.businessId}))
			.then(resp =>{
				this.business =resp.data;
			})
			.catch(err=>{
				console.log(err)
			})
			
			this.$axios.post('CartController/listCart',
			this.$qs.stringify({userId:this.user.userId,businessId:this.businessId}))
			.then(response=>{
				this.cartArr = response.data;
				
			})
			.catch(err=>{
				
			})	
		},
		computed:{
			totalPrice(){  //计算总价格
				var total = 0;
				for(var item of this.cartArr){
					total +=item.food.foodPrice*item.quantity;
				}
				
				return total+this.business.deliveryPrice;
			}
		},
		methods:{
			toUserAddress(){
				this.$router.push({path:'/userAddress',query:{businessId:this.businessId}})
			},
			toPayment(){
				if(this.deliveryaddress==null){
					alert("请选择配送地址!");
					return;
				}
			
				this.$axios.post('OrdersController/createOrders',
				this.$qs.stringify({
					userId:this.user.userId,
					businessId:this.businessId,
					daId:this.deliveryaddress.daId,
					orderTotal:this.totalPrice
				}))
				.then(resp=>{
					var orderId = resp.data;
					if(orderId>0){
						this.$router.push({path:'/payment',query:{orderId:orderId}});
					}else{
						alert('创建订单失败!');
					}
				})
				.catch(err=>{
					console.log(err);
				})
			}
		},
		filters:{
			sexFilter(value){
				return value==1?'男':'女'
			}
		}
	}
	
</script>

<style scoped>
	/* wrapper  总容器*/
	.wrapper {
		width: 100%;
		height: 100%;
	}

	/****************** header部分 ******************/
	.wrapper header {
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #fff;
		font-size: 4.8vw;

		display: flex;
		justify-content: center;
		align-items: center;

		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;
	}

	.wrapper .order-info {
		margin-top: 12vw;
		width: 100%;
		background-color: #0097FF;
		color: #FFFFFF;
		box-sizing: border-box;
		padding: 2vw;

	}

	.wrapper .order-info h5 {
		font-size: 3vw;
		font-weight: 500;
	}

	.wrapper .order-info .order-info-address {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;


	}

	.wrapper .order-info .order-info-address p {
		font-size: 5vw;
	}

	.wrapper .order-info .order-info-address i {
		font-size: 5vw;
		padding-right: 3vw;
	}

	.wrapper .order-info p {
		font-size: 3vw;
	}

	/* 商家标题 */
	.wrapper h3 {
		width: 100%;
		height: 12vw;
		box-sizing: border-box;
		padding: 3vw;
		display: flex;
		align-items: center;
		color: #666;
		font-size: 4vw;
		border: 1px solid #ddd;
	}

	/* 食品列表 */
	.wrapper .order-detailed {
		width: 100%;
	}

	.wrapper .order-detailed li {
		width: 100%;
		height: 16vw;
		box-sizing: border-box;
		padding: 1vw;
		border-bottom: 1px solid #ddd;

		display: flex;
		justify-content: space-between;
		align-items: center;

	}

	.wrapper .order-detailed li .order-detailed-left {
		display: flex;
		align-items: center;
	}

	.wrapper .order-detailed li .order-detailed-left img {
		width: 12vw;
		height: 12vw;
		margin-right: 2vw;
	}

	.wrapper .order-detailed li .order-detailed-left p {
		color: #666;
		font-size: 3.5vw;
	}

	.wrapper .order-detailed li p {
		color: #666;
		font-size: 3.5vw;
	}

	/* 配送费 */
	.wrapper .order-deliveryfee {
		width: 100%;
		height: 14vw;
		padding-bottom: 14vw;
		/*预留底部菜单的高度*/
		box-sizing: border-box;
		padding: 1vw;
		color: #666;
		font-size: 3.5vw;

		display: flex;
		justify-content: space-between;
		align-items: center;

	}

	.wrapper .total {
		width: 100%;
		height: 14vw;

		display: flex;

		position: fixed;
		left: 0;
		bottom: 0;
	}

	.wrapper .total .total-left {
		flex: 2;
		background-color: #505050;
		font-size: 4.5vw;
		font-weight: 700;
		color: #fff;

		display: flex;
		justify-content: center;
		align-items: center;
	}

	.wrapper .total .total-right {
		flex: 1;
		background-color: #38CA73;
		font-size: 4.5vw;
		font-weight: 700;
		color: #fff;

		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
